<template>
    <div class="brs-select">
        <div class="mask-top"></div>
        <div class="mask-bottom"></div>
        <div class="wheel" ref="brsWheel">
            <ul class="wheel-scroll">
                <li class="wheel-item" v-for="(item, index) in list" :key="index">{{item.title}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
import BScroll from "@better-scroll/core"
import Wheel from '@better-scroll/wheel'
import MouseWheel from "@better-scroll/mouse-wheel"
BScroll.use(Wheel)
BScroll.use(MouseWheel)
export default {
    name: 'brs-select',
    props: {
        list: {
            type: Array,
            default(){
                return []
            }
        },
        defaultIndex: {
            type: [Number, String],
            default: ''
        }
    },
    watch: {
        list: {
             handler(){
                 this.$nextTick(()=>{
                    if(this.wheel){
                        this.wheel.refresh();
                    }
                })
            },
            immediate: true
        },
        defaultIndex: {
             handler(){
                this.$nextTick(()=>{
                    if(this.wheel){
                        this.wheel.wheelTo(this.defaultIndex)
                        this.wheel.refresh();
                    }
                })
            },
            immediate: true
        },
    },
    mounted(){
        this.$nextTick(()=>{
            let wrapper = this.$refs.brsWheel;
            this.buildWheel(wrapper)
        })
    },
    methods: {
        buildWheel(wrapper){
            if(!this.wheel){
                this.wheel = new BScroll(wrapper, {
                    mouseWheel: true,
                    wheel: {
                        selectedIndex: this.defaultIndex,
                        wheelWrapperClass: 'wheel-scroll',
                        wheelItemClass: 'wheel-item',
                        wheelDisabledItemClass: 'wheel-disabled-item'
                    },
                    probeType: 3,
                    useTransition: true
                })
                this.wheel.on('scrollEnd', () => {
                    this.$emit('change', this.wheel.getSelectedIndex())
                })
            }else{
                this.wheel.refresh();
            }
            return this.wheel;
        },
    }
}
</script>

<style lang="less" scoped>
    .brs-select{
        position: relative;
        background-color: #ffffff;
        .mask-top, .mask-bottom{
            width: 100%;
            height: calc(400px / 2 - 35px);
            position: absolute;
            pointer-events: none;
            transform: translateZ(0)
        }
        .mask-top{
            top: 0;
            background: linear-gradient(to top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8));
            border-bottom: 1px solid #eee;
        }
        .mask-bottom{
            bottom: 0;
            border-top: 1px solid #eee;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8))
        }

        .wheel{
            width: 100%;
            height: 400px;
            overflow: hidden;
            .wheel-scroll{
                padding: 0;
                margin-top: calc(400px / 2 - 35px);
                .wheel-item{
                    width: 100%;
                    height: 70px;
                    display: flex;
                    font-size: 20px;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-wrap: normal;
                }
            }
        }
    }
</style>